<template>
  <div class="box">
    <!-- 头部 -->
    <div class="box-hd">
      <h2 class="title-div">
        资金账户
        <div class="fr">
          <el-button type="primary" size="small" @click="dialogAdd=true">新增账户</el-button>
          <el-button size="small" @click="dialogTransfer=true">账户间转账</el-button>
        </div>
      </h2>
    </div>
    <!-- 内容区 -->
    <div class="box-bd p30">
      <!-- 筛选条件 -->
      <div class="search-box">
        <el-button icon="el-icon-search" size="small">筛选</el-button>
      </div>
      <!-- 总账户数据 -->
      <el-row class="account-sum mb20">
        <el-col :span="8">
          <div class="fl img-icon">
            <i class="el-icon-s-help"></i>
          </div>
          <div class="fl">
            <p class="title">余额</p>
            <h3 class="num">{{ account.nowMoney.toFixed(2) }}</h3>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="fl img-icon color-red">
            <i class="el-icon-s-help"></i>
          </div>
          <div class="fl">
            <p class="title">流入</p>
            <h3 class="num color-red">{{ account.inMoney.toFixed(2) }}</h3>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="fl img-icon color-green">
            <i class="el-icon-s-help"></i>
          </div>
          <div class="fl">
            <p class="title">流出</p>
            <h3 class="num color-green">{{ account.outMoney.toFixed(2) }}</h3>
          </div>
        </el-col>
      </el-row>
      <!-- 账户列表 -->
      <ul v-loading="loading" class="list">
        <li v-for="(a,index) in accountList" :key="index" class="item mb20">
          <el-card class="box-card" shadow="hover">
            <div class="card-hd">
              <span class="hd-title">{{ a.accountName }}</span>
              <span class="type-sign">{{ typeOptions[a.accountType].name }}</span>
              <div class="fr">
                <router-link :to="{path:'/account/bill-list/'+a.id}">
                  <i class="el-icon-s-operation"></i>
                </router-link>
                <el-link :underline="false" @click="edit(a.id)">
                  <i class="el-icon-edit"></i>
                </el-link>
                <el-link :underline="false" @click="del(a)">
                  <i class="el-icon-delete"></i>
                </el-link>
              </div>
            </div>
            <p class="color-gray mb20">
              <span>备注：</span>
              {{ a.remark }}
            </p>
            <el-row class="card-bd">
              <el-col :span="8">
                <span class="color-gray">余额：</span>
                <span class="f-count">{{ a.nowMoney.toFixed(2) }}</span>
              </el-col>
              <el-col :span="8" class="color-red">
                <span class="color-gray">流入：</span>
                <span class="f-count">{{ a.inMoney.toFixed(2) }}</span>
              </el-col>
              <el-col :span="8" class="color-green">
                <span class="color-gray">流出：</span>
                <span class="f-count">{{ a.outMoney.toFixed(2) }}</span>
              </el-col>
            </el-row>
          </el-card>
        </li>
      </ul>
    </div>
    <!-- 账户新增 -->
    <el-dialog
      title="新增账户"
      :visible.sync="dialogAdd"
      width="500px"
      :destroy-on-close="true"
      :close-on-click-modal="false"
    >
      <account-add @changeState="dialogAdd=$event" @reload="initData"></account-add>
    </el-dialog>
    <!-- 账户编辑 -->
    <el-dialog
      title="编辑账户"
      :visible.sync="dialogEdit"
      width="500px"
      :destroy-on-close="true"
      :close-on-click-modal="false"
    >
      <account-edit ref="editDialog" @changeState="dialogEdit=$event" @reload="initListData"></account-edit>
    </el-dialog>
    <!-- 转账 -->
    <el-dialog
      title="转账"
      :visible.sync="dialogTransfer"
      width="500px"
      :destroy-on-close="true"
      :close-on-click-modal="false"
    >
      <transfer-money @changeState="dialogTransfer=$event" @reload="initData"></transfer-money>
    </el-dialog>
  </div>
</template>
<script>
import { findList, del, findcount } from '@/api/account'
import AccountAdd from './account-add.vue'
import AccountEdit from './account-edit.vue'
import TransferMoney from './transfer-money'
export default {
  components: {
    AccountAdd,
    AccountEdit,
    TransferMoney
  },
  data() {
    return {
      loading: false,
      dialogEdit: false,
      dialogAdd: false,
      dialogTransfer: false,
      companyId: this.$store.state.user.companyId,
      account: {
        nowMoney: 0,
        outMoney: 0,
        inMoney: 0
      },
      accountList: [],
      typeOptions: [
        {
          id: '0',
          name: '现金'
        },
        {
          id: '1',
          name: '储蓄卡'
        },
        {
          id: '2',
          name: '信用卡'
        },
        {
          id: '3',
          name: '支付宝'
        },
        {
          id: '4',
          name: '微信'
        },
        {
          id: '5',
          name: '其它资金'
        }
      ],
      searchData: {
        customerType: '',
        currentPage: 1,
        pageSize: 15
      }
    }
  },
  created() {
    this.initListData()
    this.initAccount()
  },
  methods: {
    initData() {
      this.initAccount()
      this.initListData()
    },
    initAccount() {
      findcount(this.companyId).then(res => {
        this.account = res.data
      })
    },
    initListData() {
      this.loading = true
      findList(this.companyId).then(res => {
        this.accountList = res.data
        this.loading = false
      })
    },
    edit(id) {
      this.dialogEdit = true
      let _this = this
      this.$nextTick(() => {
        _this.$refs.editDialog.initData(id)
      })
    },
    del(row) {
      del(row).then(res => {
        if (res.success) {
          this.$message.success(res.message)
          this.searchData.currentPage = 1
          this.initListData()
        } else {
          this.$message.error(res.message)
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.search-box {
  margin-bottom: 15px;
}
.account-sum {
  height: 100px;
  background: #f5f7fa;
  padding: 25px;
  .img-icon {
    line-height: 50px;
    padding: 0 30px;
    font-size: 30px;
  }
  .num {
    font-size: 22px;
  }
}
.box-card {
  .card-hd {
    line-height: 30px;
    margin-bottom: 10px;
    a {
      margin-right: 15px;
    }
  }
  .hd-title {
    font-size: 20px;
    margin-right: 15px;
  }
  .type-sign {
    background-color: #edf1f5;
    color: #909399;
    padding: 5px 10px;
  }
  .f-count {
    font-size: 20px;
  }
}
</style>
